<template>
    <div id="app">
        <el-container>
            <el-header>
                <Vheader></Vheader>
            </el-header>
            <el-container>
                <el-aside width="270px">
                    <Vmenu></Vmenu>
                </el-aside>
                <el-main>
                    <Vmain></Vmain>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Vmenu from './components/Vmenu.vue';
import Vheader from './components/Vheader';
import Vmain from './components/Vmain';

export default {
    components: {Vmenu, Vheader, Vmain}
}
</script>

<style lang="less">
@import './assets/css/common.less';

#app {
    width: 100%;
    height: 100%;

    .el-container {
        width: 100%;
        height: 100%;

        .el-header {
            background-color: #B3C0D1;
            color: #333;
            height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            width: 200px;
            height: 100%;
            overflow: hidden;
            overflow-y: scroll;

            &::-webkit-scrollbar {/*设置滚动条整体属性*/
                width: 0;
            }

            // &::-webkit-scrollbar-track { /*滚动条轨道属性*/
            //     // background-color: #E9EEF3;
            //     background-color: transparent;
            // }

            // &::-webkit-scrollbar-thumb {/*滚动条内滑块属性*/
            //     background-color: rgb(193,193,193);
            //     border-radius: 2px;
            // }
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            flex: 1;

            &::-webkit-scrollbar {/*设置滚动条整体属性*/
                width: 0;
            }
        }
    }
}
</style>
